<template>
    <view class="page">
        <Header> 账号设置 </Header>
        <div class="info">
            <div class="main">
                <div class="item fx">
                    <div class="label">头像</div>
                    <div class="fx1"></div>
                    <button
                        class="face"
                        open-type="chooseAvatar"
                        @chooseavatar="onChooseavatar"
                    >
                        <Nimg
                            v-if="us.headimgurl"
                            :src="us.headimgurl"
                            mode="aspectFill"
                            width="80"
                            height="80"
                        />
                        <Nimg v-else src="006s.png" width="80" height="80" />
                    </button>
                    <div style="padding: 20rpx">
                        <Nimg src="037.png" width="11" height="20" />
                    </div>
                </div>
                <div class="item fx">
                    <div class="label">昵称</div>
                    <input
                        type="text"
                        class="fx1"
                        style="text-align: right"
                        v-model="us.nickname"
                    />
                    <div style="padding: 20rpx">
                        <Nimg src="037.png" width="11" height="20" />
                    </div>
                </div>
                <div class="item fx">
                    <div class="label">手机号码</div>
                    <input
                        class="fx1"
                        style="text-align: right"
                        placeholder="请填写您的手机号"
                        v-model="us.tel"
                    />
                </div>
                <div class="item fx">
                    <div class="label">性别</div>
                    <div class="fx1"></div>
                    <div class="si fx" @click="us.sex = '1'">
                        <div class="icon" v-if="us.sex == '1'">
                            <Nimg src="016.png" width="26" height="26" />
                        </div>
                        <div class="icon" v-else>
                            <Nimg src="017.png" width="26" height="26" />
                        </div>
                        男
                    </div>
                    <div style="width: 20rpx"></div>
                    <div class="si fx" @click="us.sex = '2'">
                        <div class="icon" v-if="us.sex == '2'">
                            <Nimg src="016.png" width="26" height="26" />
                        </div>
                        <div class="icon" v-else>
                            <Nimg src="017.png" width="26" height="26" />
                        </div>
                        女
                    </div>
                </div>
                <div class="item fx">
                    <div class="label">收货地址</div>
                    <input
                        class="fx1"
                        style="text-align: right"
                        placeholder="请填写收货地址"
                        v-model="us.receive_addr"
                    />
                </div>
            </div>
            <div class="bigBtn fx jcc" @click="submitNow">确认</div>
        </div>
    </view>
</template>

<script>
import $ from "@/common";
export default {
    data() {
        return {
            us: {},
            from: "",
        };
    },
    // watch: {
    //     "us.nickname": {
    //         handler(n, o) {
    //             this.setNickname();
    //         },
    //     },
    // },
    methods: {
        onChooseavatar(e) {
            let url = $.domain + "/api/" + $.user("imgUpload");
            $.log(e);
            $.log(url);
            wx.uploadFile({
                url,
                filePath: e.detail.avatarUrl,
                name: "src[]",
                formData: {
                    user_id: $.getLocal("userId"),
                    auth_token: $.auth_token(),
                },
                success: (res) => {
                    this.init();
                },
                fail: (err) => {
                    $.log(err);
                },
            });
        },
        setNickname(e) {
            setTimeout(() => {
                let url = $.user("changeName");
                let name = this.us.nickname;
                let data = {
                    name,
                };
                $.post(url, data).then((res) => {
                    //this.init();
                });
            }, 500);
        },
        init() {
			let that = this;
            $.getUsInfo().then((us) => {
                if (us.headimgurl !== "") {
                    if (!us.headimgurl.startsWith("http")) {
                        us.headimgurl = "/upload/user/" + us.headimgurl;
                    }
                }
                that.us = us;
                if (!that.us.nickname) {
                    that.us.nickname = "微信用户";
                }
                if (!that.us.tel) {
                    that.us.tel = "";
                }
                if (!that.us.sex) {
                    that.us.sex = "1";
                }
                if (!that.us.receive_addr) {
                    that.us.receive_addr = "";
                }
            });
        },
        submitNow() {
            let url = $.user("changeInfo");
            let data = {
                name: this.us.nickname,
                tel: this.us.tel,
                sex: this.us.sex,
                receive_addr: this.us.receive_addr,
            };
            if (this.us.nickname.trim() == "") {
                $.tip("请输入昵称");
                return;
            }
            if (this.us.sex.trim() == "0" || this.us.sex.trim() == "") {
                $.tip("请选择性别");
                return;
            }
            if (this.us.tel.trim() == "") {
                $.tip("请填写手机号码");
                return;
            }
            if (!$.isPhone(this.us.tel)) {
                $.tip("请填写正确的手机号");
                return;
            }
            if (this.us.receive_addr.trim() == "") {
                $.tip("请填写收货地址");
                return;
            }
            $.post(url, data).then((res) => {
                if (res.isError) {
                    return;
                }
                $.suc("提交成功");
                if (this.from === "kechengxiangqing") {
                    setTimeout(() => {
                        this.back();
                    }, 500);
                }
                this.init();
            });
        },
    },
    onLoad(op) {
        if (op.from) {
            this.from = op.from;
        }
        this.init();
    },
};
</script>

<style lang="less" scoped>
.page {
    background: #fff;
    height: 100vh;
    font-size: 26rpx;
    overflow: hidden;
}

.info {
    height: calc(100vh - 180rpx);
    overflow: auto;
    background: #fafafa;
}

.title {
    padding-left: 60rpx;
    font-size: 32rpx;
    flex: 1;
}

.main {
    width: 686rpx;
    box-shadow: 0rpx 1rpx 9rpx 0rpx rgba(0, 0, 0, 0.08);
    border-radius: 16rpx;
    margin: 0 auto;
    margin-top: 30rpx;
    background: #fff;
    .item {
        padding: 38rpx;
        border-bottom: 2rpx solid #dddddd;
        color: #999999;
        &:last-child {
            border: 0;
        }
        .face {
            width: 80rpx;
            height: 80rpx;
            overflow: hidden;
            border-radius: 50%;
        }
        .label {
            font-size: 26rpx;
            color: #333333;
        }
        .icon {
            margin-right: 10rpx;
        }
    }
}

.bigBtn {
    width: 686rpx;
    height: 80rpx;
    background: #20d381;
    color: #fff;
    font-size: 28rpx;
    margin: 0 auto;
    margin-top: 30rpx;
    border-radius: 10rpx;
}
</style>

